<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<head>
    <title>交易分析</title>
    <div data-th-replace="layout/head-top"></div>
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInLeft">
        <div>
            <h4>
                <ol class="breadcrumb">
                    <li>
                        <a href="javascript:void(0)"><i class="fa fa-home"></i> <span>统计</span></a>
                    </li>
                    <li>
                        <strong>交易分析</strong>
                    </li>
                </ol>
            </h4>
        </div>

        <div>
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>交易数据</h5>
                    <div class="pull-right stat-time-filter__wrap">
                        <section class="form-inline">
                            <section class="form-group">
                                <span class="fs14 c-999">时间筛选：</span>
                                <select class="form-control" id="trade-time-type">
                                    <option value="1">今日</option>
                                    <option value="5">昨日</option>
                                    <option value="2" selected="selected">近7天</option>
                                    <option value="3">近30天</option>
                                    <option value="4">自定义</option>
                                </select>
                                <!--今日，近7天，近30天显示格式-->
                                <section class="checkbox ml10 hide time-box">
                                    <span class="fs14 c-333">2018-12-05</span>
                                    <span class="fs14 c-999"> 至 </span>
                                    <span class="fs14 c-333">2018-12-11</span>
                                </section>
                                <!--自定义调用日期控件-->
                                <section class="checkbox m-r hide time-input-box">
                                    <input placeholder="开始时间"
                                           id="statTimeLaydate"
                                           name="statTimeLaydate"
                                           class="laydate-icon form-control layer-date" type="text"/>
                                    <div class="checkbox"><span class="fs12 c-999">至</span></div>
                                    <input placeholder="结束时间"
                                           id="endTimeLaydate"
                                           name="endTimeLaydate"
                                           class="laydate-icon form-control layer-date" type="text"/>
                                </section>
                            </section>
                        </section>
                    </div>
                </div>
                <div class="ibox-content stat-iv-data__wrap stat-data__box">

                    <!--统计模块公共加载状态 开始-->
                    <div class="stat-loading_wrap hide" id="trade-loading-box">
                        <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling"><circle cx="50" cy="50" fill="none" ng-attr-stroke="{{config.color}}" ng-attr-stroke-width="{{config.width}}" ng-attr-r="{{config.radius}}" ng-attr-stroke-dasharray="{{config.dasharray}}" stroke="#4487f8" stroke-width="2" r="24" stroke-dasharray="113.09733552923255 39.69911184307752"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg>
                    </div>
                    <!--统计模块公共加载状态 结束-->

                    <div class="row">
                        <section class="iv-data-item">
                            <span class="fs12 c-999">录播课（单）</span>
                            <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，所有录播课的交易量（只包括付费课）"><i class="fa fa-exclamation-circle"></i></span>
                            <aside class="mt5">
                                <strong class="fs24 c-000 vam" id="videoOrderNum">--</strong>
                                <span class="fs14 c-222 vam hide">万</span>
                            </aside>
                        </section>
                        <section class="iv-data-item">
                            <span class="fs12 c-999">专栏课（单）</span>
                            <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，所有图文课的交易量（只包括付费课）"><i class="fa fa-exclamation-circle"></i></span>
                            <aside class="mt5">
                                <strong class="fs24 c-000 vam" id="columnsOrderNum">--</strong>
                                <span class="fs14 c-222 vam hide">万</span>
                            </aside>
                        </section>
                        <section class="iv-data-item">
                            <span class="fs12 c-999">套餐课（单）</span>
                            <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，所有套餐课的交易量（只包括付费课）"><i class="fa fa-exclamation-circle"></i></span>
                            <aside class="mt5">
                                <strong class="fs24 c-000 vam" id="packageOrderNum">--</strong>
                                <span class="fs14 c-222 vam hide">万</span>
                            </aside>
                        </section>
                        <section class="iv-data-item">
                            <span class="fs12 c-999">直播课（单）</span>
                            <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，所有直播课的交易量（只包括付费课）"><i class="fa fa-exclamation-circle"></i></span>
                            <aside class="mt5">
                                <strong class="fs24 c-000 vam" id="liveOrderNum">--</strong>
                                <span class="fs14 c-222 vam hide">万</span>
                            </aside>
                        </section>
                        <section class="iv-data-item">
                            <span class="fs12 c-999">试卷（单）</span>
                            <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，所有试卷的交易量（只包括付费试卷）"><i class="fa fa-exclamation-circle"></i></span>
                            <aside class="mt5">
                                <strong class="fs24 c-000 vam" id="examOrderNum">--</strong>
                                <span class="fs14 c-222 vam hide">万</span>
                            </aside>
                        </section>
                        <section class="iv-data-item">
                            <span class="fs12 c-999">图书（单）</span>
                            <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，所有图书的交易量（只包括付费图书）"><i class="fa fa-exclamation-circle"></i></span>
                            <aside class="mt5">
                                <strong class="fs24 c-000 vam" id="bookOrderNum">--</strong>
                                <span class="fs14 c-222 vam hide">万</span>
                            </aside>
                        </section>
                        <section class="iv-data-item">
                            <span class="fs12 c-999">会员（单）</span>
                            <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，所有会员开通的交易量"><i class="fa fa-exclamation-circle"></i></span>
                            <aside class="mt5">
                                <strong class="fs24 c-000 vam" id="memberOrderNum">--</strong>
                                <span class="fs14 c-222 vam hide">万</span>
                            </aside>
                        </section>
                        <section class="iv-data-item">
                            <span class="fs12 c-999">问答（单）</span>
                            <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，所有会员开通的交易量"><i class="fa fa-exclamation-circle"></i></span>
                            <aside class="mt5">
                                <strong class="fs24 c-000 vam" id="qaOrderNum">--</strong>
                                <span class="fs14 c-222 vam hide">万</span>
                            </aside>
                        </section>
                        <section class="iv-data-item">
                            <span class="fs12 c-999">问答围观（单）</span>
                            <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，所有会员开通的交易量"><i class="fa fa-exclamation-circle"></i></span>
                            <aside class="mt5">
                                <strong class="fs24 c-000 vam" id="attendOrderNum">--</strong>
                                <span class="fs14 c-222 vam hide">万</span>
                            </aside>
                        </section>
                    </div>

                    <!--交易数据曲线图 开始-->
                    <div class="transaction-state-chart__wrap pt10 m-t" id="trade-statistic-box">
                    </div>
                    <!--交易数据曲线图 结束-->

                </div>
            </div>
        </div>

        <div>
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>交易额度与订单量分布</h5>
                    <div class="pull-right stat-time-filter__wrap">
                        <section class="form-inline">
                            <section class="form-group">
                                <span class="fs14 c-999">时间筛选：</span>
                                <select class="form-control" id="spread-time-type">
                                    <option value="1">今日</option>
                                    <option value="5">昨日</option>
                                    <option value="2" selected="selected">近7天</option>
                                    <option value="3">近30天</option>
                                    <option value="4">自定义</option>
                                </select>
                                <!--今日，近7天，近30天显示格式-->
                                <section class="checkbox ml10 hide time-box">
                                    <span class="fs14 c-333">2018-12-05</span>
                                    <span class="fs14 c-999"> 至 </span>
                                    <span class="fs14 c-333">2018-12-11</span>
                                </section>
                                <!--自定义调用日期控件-->
                                <section class="checkbox m-r hide time-input-box">
                                    <input placeholder="开始时间"
                                           id="spreadStatTimeLaydate"
                                           name="statTimeLaydate"
                                           class="laydate-icon form-control layer-date" type="text"/>
                                    <div class="checkbox"><span class="fs12 c-999">至</span></div>
                                    <input placeholder="结束时间"
                                           id="spreadEndTimeLaydate"
                                           name="endTimeLaydate"
                                           class="laydate-icon form-control layer-date" type="text"/>
                                </section>
                            </section>
                        </section>
                    </div>
                </div>
                <div class="ibox-content stat-iv-data__wrap stat-data__box">
                    <!--统计模块公共加载状态 开始-->
                    <div class="stat-loading_wrap hide" id="trade-spread-loading-box">
                        <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling"><circle cx="50" cy="50" fill="none" ng-attr-stroke="{{config.color}}" ng-attr-stroke-width="{{config.width}}" ng-attr-r="{{config.radius}}" ng-attr-stroke-dasharray="{{config.dasharray}}" stroke="#4487f8" stroke-width="2" r="24" stroke-dasharray="113.09733552923255 39.69911184307752"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg>
                    </div>
                    <!--统计模块公共加载状态 结束-->
                    <div class="transaction-state-chart__wrap pt10" id="spread-statistic-box">
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div class="row">
                <section class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>所有交易支付方式</h5>
                            <div class="pull-right stat-time-filter__wrap">
                                <section class="form-inline">
                                    <section class="form-group">
                                        <span class="fs14 c-999">时间筛选：</span>
                                        <select class="form-control" id="pay-time-type">
                                            <option value="1">今日</option>
                                            <option value="5">昨日</option>
                                            <option value="2" selected="selected">近7天</option>
                                            <option value="3">近30天</option>
                                            <option value="4">自定义</option>
                                        </select>
                                        <!--今日，近7天，近30天显示格式-->
                                        <section class="checkbox ml10 hide time-box">
                                            <span class="fs14 c-333">2018-12-05</span>
                                            <span class="fs14 c-999"> 至 </span>
                                            <span class="fs14 c-333">2018-12-11</span>
                                        </section>
                                        <!--自定义调用日期控件-->
                                        <section class="checkbox m-r hide time-input-box">
                                            <input placeholder="开始时间"
                                                   id="payStatTimeLaydate"
                                                   name="statTimeLaydate"
                                                   class="laydate-icon form-control layer-date" type="text"/>
                                            <div class="checkbox"><span class="fs12 c-999">至</span></div>
                                            <input placeholder="结束时间"
                                                   id="payEndTimeLaydate"
                                                   name="endTimeLaydate"
                                                   class="laydate-icon form-control layer-date" type="text"/>
                                        </section>
                                    </section>
                                </section>
                            </div>
                        </div>
                        <div class="ibox-content stat-iv-data__wrap stat-data__box">
                            <!--统计模块公共加载状态 开始-->
                            <div class="stat-loading_wrap hide" id="pay-type-loading-box">
                                <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling"><circle cx="50" cy="50" fill="none" ng-attr-stroke="{{config.color}}" ng-attr-stroke-width="{{config.width}}" ng-attr-r="{{config.radius}}" ng-attr-stroke-dasharray="{{config.dasharray}}" stroke="#4487f8" stroke-width="2" r="24" stroke-dasharray="113.09733552923255 39.69911184307752"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg>
                            </div>
                            <!--统计模块公共加载状态 结束-->
                            <div class="transaction-state-chart__wrap pt10" id="pay-type-statistic-box">
                            </div>
                        </div>
                    </div>
                </section>
                <section class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>交易支付渠道</h5>
                            <div class="pull-right stat-time-filter__wrap">
                                <section class="form-inline">
                                    <section class="form-group">
                                        <span class="fs14 c-999">时间筛选：</span>
                                        <select class="form-control" id="form-time-type">
                                            <option value="1">今日</option>
                                            <option value="5">昨日</option>
                                            <option value="2" selected="selected">近7天</option>
                                            <option value="3">近30天</option>
                                            <option value="4">自定义</option>
                                        </select>
                                        <!--今日，近7天，近30天显示格式-->
                                        <section class="checkbox ml10 hide time-box">
                                            <span class="fs14 c-333">2018-12-05</span>
                                            <span class="fs14 c-999"> 至 </span>
                                            <span class="fs14 c-333">2018-12-11</span>
                                        </section>
                                        <!--自定义调用日期控件-->
                                        <section class="checkbox m-r hide time-input-box">
                                            <input placeholder="开始时间"
                                                   id="formStatTimeLaydate"
                                                   name="statTimeLaydate"
                                                   class="laydate-icon form-control layer-date" type="text"/>
                                            <div class="checkbox"><span class="fs12 c-999">至</span></div>
                                            <input placeholder="结束时间"
                                                   id="formEndTimeLaydate"
                                                   name="endTimeLaydate"
                                                   class="laydate-icon form-control layer-date" type="text"/>
                                        </section>
                                    </section>
                                </section>
                            </div>
                        </div>
                        <div class="ibox-content stat-iv-data__wrap stat-data__box">
                            <!--统计模块公共加载状态 开始-->
                            <div class="stat-loading_wrap hide" id="order-form-loading-box">
                                <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling"><circle cx="50" cy="50" fill="none" ng-attr-stroke="{{config.color}}" ng-attr-stroke-width="{{config.width}}" ng-attr-r="{{config.radius}}" ng-attr-stroke-dasharray="{{config.dasharray}}" stroke="#4487f8" stroke-width="2" r="24" stroke-dasharray="113.09733552923255 39.69911184307752"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg>
                            </div>
                            <!--统计模块公共加载状态 结束-->
                            <div class="transaction-state-chart__wrap pt10" id="order-form-statistic-box">
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>

    </div>
    <div data-th-replace="layout/head-footer"></div>
    <script type="text/javascript" th:src="@{{path}/admin/libs/plugins/echarts/echarts.min.3.0.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/admin/libs/plugins/layer/laydate/laydate.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/admin/business/statistics/time-utils.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/admin/business/statistics/trade/trade-statistics.js?v={v}(path=${staticPath},v=${v})}"></script>
</body>
</html>
